+<template>
	<div>
		<!-- 后台管理整体区域 -->
		<el-container>
			<!-- 头部区域 -->
			<el-header>
				<div>
					<img src="../../../assets/1.jpg" style="width: 40px;border-radius: 50%;" />
					<span class="span">UNI-ADMIN</span>
				</div>
				<div>
					<el-menu class="el-menu-demo" mode="horizontal" background-color="#545c64"
					 text-color="#fff" active-text-color="#ffd04b" @select="activeInd">
						<el-menu-item :index="index.toString()" v-for="(item,index) in navBar">{{item.name}}</el-menu-item>
						<el-submenu index="2">
							<template slot="title">
								<img src="../../../assets/4.jpg" style="width: 35px;border-radius: 50%;" />
								<span>{{this.$store.state.userMsg.username}}</span>
							</template>
							<el-menu-item index="2-1">修改</el-menu-item>
							<el-menu-item @click="layout">退出</el-menu-item>
						</el-submenu>
					</el-menu>
				</div>
			</el-header>
			<el-container>
				<!-- 左侧菜单区域 -->
				<el-aside id="aside" :width="isCollapse ? '64px' : '200px'">
					<!-- toggle:开关 -->
					<div class="toggle" @click="toggleMenu">|||</div>
					<el-menu class="el-menu-vertical-demo" router :collapse="isCollapse" :collapse-transition="false">
						<el-menu-item :index="it.path" v-for="(it,ind) in navBar[activeIndex].children" :key="ind">
							<i :class="it.icon"></i>
							<span slot="title">{{it.name}}</span>
						</el-menu-item>
					</el-menu>
				</el-aside>
				<!-- 右侧主要内容区域 -->
				<el-main v-loading="this.$store.state.isLoading" element-loading-text="拼命加载中"
				 element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.1)">
					<!-- 面包屑区域 -->
					<div class="bread">
						<bread />
					</div>
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import nav from "@/common/nav/nav.js"
	import bread from "../common/bread.vue"
	export default {
		props: [],
		components: {bread},
		data() {
			return {
				navBar: {},
				activeIndex: 0,
				isCollapse: false,
			};
		},
		created() {
			this.navBar = nav;
		},
		mounted() {
			this.setMenuHeight();
			document.addEventListener("resize",this.setMenuHeight);
		},
		methods: {
			// 退出登录的操作
			layout() {
				this.$confirm("您确定要退出登录吗?", "提示", {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					// 请求退出登录的接口
					this.$axios.post("/api/admin/logout").then(res => {
						console.log(res)
						// 提交退出登录的方法到vuex
						this.$store.commit("layout")
						// 成功提示
						this.$message.success("退出成功");
						// 跳转路由
						this.$router.push("/admin/login");
					}).catch(error => {
						// 错误提示
						this.$message.error(error.response.data.msg);
					})
				}).catch(() => {
					// 取消的提示
					this.$message.error("您已经取消了退出登录的操作");
				})
			},
			activeInd(ind) {
				this.activeIndex = ind;
				// console.log(ind)
				this.$router.push(this.navBar[ind].redirect)
			},
			// 控制左侧菜单的收缩
			toggleMenu() {
				this.isCollapse = !this.isCollapse;
			},
			// 设置左侧菜单栏的高度，充满屏幕
			setMenuHeight() {
				// 1.计算出浏览器的可视化高度
				let html = document.documentElement || document.body;
				// 2.可视化窗口的高度
				let h = html.clientHeight;
				// 3.计算aside高度
				aside.style.height = (h-60)+"px";
			}
		},
		computed: {

		},
		watch: {

		}
	};
</script>

<style lang="scss" scoped>
	.el-container {
		width: 100%;
		// 头部布局
		.el-header {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #545c64;

			div:nth-of-type(1) {
				display: flex;
				flex-wrap: wrap;
				align-items: center;

				.span {
					font-size: 22px;
					color: #fff;
				}
			}
		}
		// 左侧菜单栏布局
		.el-aside {
			transition: width 1.5s ease;
			border-right: 1px solid #ddd;
			.el-menu {
				border: none;
			}
			.toggle {
				width: 100%;
				height: 30px;
				line-height: 30px;
				text-align: center;
				background: #F0F0F0;
				font-size: 18px;
				letter-spacing: 0.2em;
				cursor: pointer;
			}
		}
		// 面包屑布局
		.bread {
			padding-bottom: 15px;
			border-bottom: 1px solid #ddd;
		}
	}
</style>
